<template>
	<view class="sales_order">
		<view class="team_top">
			<view class="nav">
				<u-tabs :list="navList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false" :current="current" @change="navChange"></u-tabs>
			</view>
		</view>
		<view style="height: 112rpx;"></view>
		<!-- <view style="height: 88rpx;"></view>
		<view class="num_list">
			<view class="txt">
				<text class="t_num">12</text>
				<text class="t_tip">买单总量</text>
			</view>
			<view class="txt">
				<text class="t_num">12</text>
				<text class="t_tip">买单总额</text>
			</view>
		</view> -->
		<!--  -->
		<view class="no_html" v-if="list.length==0">
			<image src="@/static/images/no_img5.png" mode=""></image>
			<text>暂无买单信息</text>
		</view>
		<!--  -->
		<view v-else>
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list_top">
					<view class="text"><text>专享</text>{{item.createtime}}</view>
					<view class="text right" v-if="item.status==2">请提交支付凭证</view>
					<view class="text right" v-if="item.status==3">待审核</view>
					<view class="text right" v-if="item.status==4">已完成</view>
					<view class="text right" v-if="item.status==5">已关闭</view>
				</view>
				<view class="goods_info">
					<view class="image">
						<image :src="item.goods_image" mode="aspectFill"></image>
						<text class="txt1">进货</text>
					</view>
					<view class="info">
						<view class="name one-txt-cut">{{item.goods_name}}</view>
						<view class="money">
							<text class="color1">￥{{item.wyy}}</text>
							<text class="color2">赠{{item.mrzf}}%</text>
						</view>
						<view class="num">
							<text class="left">到账数量：{{item.zq_text}}</text>
							<text class="right">x{{item.pay_money}}</text>
						</view>
					</view>
				</view>
				<view class="tip_txt">
					<view class="txt">
						<text class="color1">付</text>￥{{item.pay_money}}
					</view>
					<view class="txt">
						<text class="color2">得</text>￥{{item.zq_text}}
					</view>
					<view class="txt">
						<text class="color3">赚</text>￥{{item.make_money}}
					</view>
				</view>
				<view class="list_btn">
					<!-- <text class="btn1" @click.stop="phoneBtn(item.shop.mobile)">联系店铺</text> -->
				</view>
			</view>
			<view class="mall_loading" v-if="list.length">
				<u-loadmore :status="status" color='#999' />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
					name: '未完成',
					type: 2,
				}, {
					name: '已完成',
					type: 4,
				}, {
					name: '已关闭',
					type: 6,
				}],
				current: 0,
				id:'',
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page: 1,
				list: [],
			};
		},
		onLoad(opt) {
			this.id=opt.id
			this.getList()
		},
		onShow() {
			
		},
		methods: {
			// 列表
			getList(vid) {
				var that = this
				if(that.page==1){
					that.$tips.showLoading('加载中')
				}else{
					that.status = 'loading'
				}
				var params = {
					user_id:that.id,
					page:that.page,
					status: that.navList[that.current].type
				}
				that.$httpApi.buyOrderList(params).then((res) => {
					if (res.code == 1) {
						if (that.page == 1) {
							that.list = []
							that.$tips.hideLoading()
						}
						if (res.data.current_page == res.data.last_page) {
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
						}
						that.list = that.list.concat(res.data.data)
					}
				})
			},
			// nav
			navChange(index) {
				this.current = index
				this.page = 1
				this.getList()
			},
			// 详情
			detailsBtn(val){
				uni.navigateTo({
					url:'/pages/shop/buy_in_details?id='+val
				})
			},
			// 联系店长
			phoneBtn(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
		},
		onReachBottom() {
			if (this.status == 'nomore' || this.status == 'loading') {
				return
			}
			this.page++
			this.getList()
		},
	}
</script>

<style lang="less">
	.sales_order{
		width: 100%;
		.team_top{
			position: fixed;
			z-index: 10;
			width: 100%;
			background: #fff;
			border-bottom: 2rpx solid #f7f8fa;
			.nav{
				width: 100%;
				height: 88rpx;
			}
		}
		.num_list{
			width: 100%;
			padding: 24rpx 0;
			background: #fff;
			display: flex;
			justify-content: space-between;
			.txt{
				flex: 1;
				// width: 100%;
				border-left: 2rpx solid #f7f8fa;
				text{
					display: block;
					width: 100%;
					text-align: center;
				}
				.t_num{
					font-size: 32rpx;
					font-family: OPPOSans-Bold, OPPOSans;
					font-weight: bold;
					color: #222222;
				}
				.t_tip{
					padding-top: 8rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
			.txt:first-child{
				border-left: none;
			}
		}
		.list {
			width: 100%;
			background: #fff;
			margin-bottom: 24rpx;
		
			.list_top {
				width: 100%;
				line-height: 88rpx;
				padding: 0 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;
		
					text {
						display: block;
						margin-right: 10rpx;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						background: #6B6152;
						border-radius: 5rpx;
					}
				}
		
				.right {
					color: #666;
				}
			}
		
			.goods_info {
				width: 100%;
				padding: 24rpx 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
		
				.image {
					position: relative;
					width: 168rpx;
					height: 168rpx;
		
					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
		
					.txt1 {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						display: block;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						background: #FFA551;
						border-radius: 10rpx 0 10rpx 0;
					}
				}
		
				.info {
					width: calc(100% - 168rpx);
					padding-left: 20rpx;
					height: 168rpx;
		
					.name {
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
		
					.money {
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
		
						text {
							padding-right: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}
		
						.color1 {
							color: #FF6230;
						}
		
						.color2 {
							color: #26C281;
						}
					}
		
					.num {
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
		
						.left {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}
		
						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
		
			.tip_txt {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.txt {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;
		
					text {
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}
		
					.color1 {
						background: #FF815A;
					}
		
					.color2 {
						background: #43A5FF;
					}
		
					.color3 {
						background: #51CE9A;
					}
				}
			}
		
			.list_btn {
				width: 100%;
				padding: 32rpx;
				display: flex;
				justify-content: flex-end;
		
				text {
					margin-left: 12rpx;
					display: block;
					padding: 0 20rpx;
					height: 64rpx;
					line-height: 60rpx;
					border-radius: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}
		
				.btn1 {
					color: #999;
					border: 2rpx solid #EBEBEB;
				}
		
				.btn2 {
					color: #26C281;
					border: 2rpx solid #26C281;
				}
			}
		}
	}
</style>
